<template>
  <div>
    <el-row>
      <el-col>
        <el-checkbox
          class="all_t"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChangeSales"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="checkeds"
          @change="handleCheckedColumnChangeSales"
        >
          <el-checkbox
            v-for="item in detailsList"
            :label="item.title"
            :key="item.title"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-col>
        <el-radio-group v-model="radio" @change="radioOptions">
          <el-radio label="备选项3">备选项</el-radio>
          <el-radio label="备选项6">备选项</el-radio>
          <el-radio label="备选项9">备选项</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
  </div>
</template>

  
<script>
export default {
  name: "demo",
  data() {
    return {
      radio:'备选项3',
      checkAll: false,
      checkeds: [], // 已选数据
      names: [], // 默认所有数据
      isIndeterminate: false, // 全选框是否在勾选状态
      detailsList: [
        {
          title: "销量",
          values: ["0", "5"],
        },
        {
          title: "销售额",
          values: ["8", "1"],
        },
        {
          title: "订单量",
          values: ["3", "9"],
        },
        {
          title: "退款量",
          values: ["0", "0"],
        },
      ],
    };
  },
  created() {
    this.names = this.detailsList;
  },
  methods: {
    // 单选框*
    radioOptions(value){
       console.log(value,"value123");
    },
    // 复选框--全选
    handleCheckAllChangeSales(val) {
      var checkedsItem = val ? this.detailsList : [];
      if (checkedsItem.length > 0) {
        checkedsItem.map((item) => {
          this.checkeds.push(item.title);
        });
      } else {
        this.checkeds = [];
      }
      this.isIndeterminate = false;
    },
    // 复选框--单选
    handleCheckedColumnChangeSales(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.names.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.names.length;
    },
  },
};
</script>

  
  <style>
</style>